<template id="#template">
  <div :style="containerStyle">
    <div class="c-center" :style="paddingStyle">
      <div class="out-style" :style="outStyle"></div>
      <div class="in-style" :style="inStyle"></div>
      <div class="mid-style" :style="midStyle"></div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'loading',

    data () {
      return {
        outStyle: '',
        midStyle: '',
        inStyle: '',
        containerStyle: '',
        paddingStyle: '',
      }
    },

    props: {
      color: String,
      size: Number,
      padding: Number,
    },

    mounted () {
      const color = this.color ? this.color : '#e34981';
      const tempSize = this.size ? this.size : 150;
      const tempPadding = this.padding ? this.padding : 0;
      const paddingSize = tempSize - tempPadding;
      this.containerStyle = 'width: ' + tempSize + 'px; height: ' + tempSize + 'px;';
      this.paddingStyle = 'width: ' + paddingSize + 'px; height: ' + paddingSize + 'px;';
      this.inStyle = 'border-top-color: ' + color + '; border-bottom-color: ' + color +';';
      this.outStyle = 'border-top-color: ' + color + '; border-bottom-color: ' + color +';';
      this.midStyle = 'border-top-color: ' + color + '; border-bottom-color: ' + color +';';
    },
  }
</script>

<style scoped>
  .out-style {
    width: 70%;
    height: 70%;
    left: 15%;
    top: 15%;
    position: absolute;
    border-radius: 50%;
    display: block;
    border: 3px solid;
    border-left-color: transparent;
    border-right-color: transparent;
    animation: spin 2s linear reverse infinite;
  }

  .in-style {
    width: 64%;
    height: 64%;
    left: 18%;
    top: 18%;
    position: absolute;
    border-radius: 50%;
    display: block;
    border: 3px solid;
    border-left-color: transparent;
    border-right-color: transparent;
    animation: spin 2s linear infinite;
  }

  .mid-style {
    width: 20%;
    height: 20%;
    left: 40%;
    top: 40%;
    position: absolute;
    border-radius: 50%;
    display: block;
    border: 3px solid;
    border-left-color: transparent;
    border-right-color: transparent;
    animation: spin 1s linear infinite;
  }

  @keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(180deg);
    }
  }
</style>
